<template lang="pug">
  el-drawer.commonDrawer(
    title="新增线索"
    :visible="visibleDialog"
    append-to-body
    center
    destroy-on-close
    direction="rtl"
    size="640px"
    @close="$_handleCancel"
  )
    .drawer-content
      clue-form(ref="clueForm" inType="clue")
    .drawer-footer.tr
      el-button.gradientVertical(size="large" :loading="submitting" @click="submitHandle" round) 确定
</template>
<script>
import ClueForm from '../../components/clueForm'
import { clueSubmit } from '../../api'

export default {
  components: {
    ClueForm
  },
  props: {
    id: {
      type: String,
      default: ''
    },
    visible: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      submitting: false
    }
  },
  computed: {
    visibleDialog: {
      get () {
        return this.visible
      },
      set (val) {
        this.$emit('update:visible', val)
      }
    }
  },
  created () {
  },
  methods: {
    // 提交
    async submitHandle () {
      const values = await this.$refs.clueForm.submitHandle()
      console.log(values)
      this.submitting = true
      clueSubmit({
        id: this.id,
        ...values
      }, !!this.id).then(() => {
        this.$message.success('提交成功')
        this.$emit('getList', true)
        this.$_handleCancel()
      }).finally(() => {
        this.submitting = false
      })
    },
    $_handleCancel () {
      this.visibleDialog = false
    }
  }
}
</script>
